@charset "utf-8";
@import "common/reset";
@function p($px){
    @return $px/2+px;
}

.web{
    background:url(../img/banggou_bg.png);
    width:100%;
    height:100%;
    header{
        padding:0 p(10);
        height:p(72);
        width:100%;
        display:flex;
        justify-content: center;
        align-items: center;
        >div{
            width:100%;
            height:p(52);
            line-height: p(52);
            border:p(1) solid #cdccd0;
            border-radius: p(10);
            text-align: center;
            background:#fff;
            h3{
                color:#5c5c5c;
                font-size:p(22);
            }
        }
    }
    section{
        .template{
            display:flex;
            justify-content: space-around;
            width:100%;
            height:p(200);
            padding:0 p(10);
            border-top:p(1) solid #cdccd0;
            border-bottom:p(1) solid #cdccd0;
            background:#fff;
            .template_left{
                width:p(177);
                height:100%;
                display:flex;
                flex-grow: 2.8;
                justify-content: center;
                align-items: center;
                a{
                    display:inline-block;
                    img{
                        width:p(119);
                        height:p(123);
                    }
                }
            }
            .template_right{
                display:flex;
                flex-grow: 7.2;
                width:p(450);
                height:100%;
                font-size:0;
                margin-top:p(8);
                a{
                    display:block;
                    font-size:0;
                    h3{
                        font-size:p(24);
                        color:#5c5c5c;
                    }
                    p:nth-of-type(1){
                        font-size:p(18);
                        color:#5c5c5c;
                        padding-top:p(5);
                        overflow: hidden; 
                        display: -webkit-box; 
                        -webkit-line-clamp: 2; 
                        -webkit-box-orient: vertical; 
                    }
                    p:nth-of-type(2){
                        font-size:p(24);
                        color:#eb7575;
                        margin-top:p(7);
                    }
                    p:nth-of-type(3){
                        display:flex;
                        justify-content: flex-end;
                        text-align: center;
                        >span{
//                          position:relative;
                            display:inline-block;
                            width:p(150);
                            height:p(43);
                            line-height: p(43);
                            border:p(1) solid #1074ae;
                            border-radius: p(5);
                            font-size:p(20);
                            color:#5c5c5c;
                            img:nth-child(1){
                                width:p(27);
                                height:p(24);
                            }
                            img:nth-child(2){
//                              position:absolute;
//                              top:p(6);
//                              left:p(20);
                                width:p(27);
                                height:p(24);
                                display:none;
                            }
                        }
                        >span:hover{
                            background:#1074ae;
                            color:#fff;
                            img:nth-child(1){
                                display:none;
                            }
                            img:nth-child(2){
                                display:inline-block;
                            }
                        }
                    }
                    
                }
            }
        }
        .comment{
            
            width:100%;
            height:p(301);
            border-top:p(1) solid #cdccd0;
            background:#e7e7e7;
            padding:p(10) p(11) p(10) 0;
            position:fixed;
            bottom:0;
            display:flex;
            justify-content: space-between;
            .comment_left{
                height:100%;
                display:flex;
                flex-grow: 1.6;
                justify-content: center;
                >div{
                    h3{
                        font-size:p(24);
                        color:#5c5c5c;
                    }
                    img{
                        width:p(60);
                        height:p(60);
                    }
                }
            }
            .comment_right{
                display:flex;
                flex-direction: column;
                flex-grow: 8.4;
                >div{
                    input{
                    width:p(113);
                    height:p(43);
                    text-align: center;
                    font-weight: bold;
                    color:#fff;
                    border:p(1) solid #cdccd0;
                    border-radius: p(6);
                    background:#171b38;
                }
                textarea{
                    width:100%;
                    height:p(233);
                    color:#383838;
                    resize: none;
                    padding:p(12);
                    border:p(1) solid #cdccd0;
                    border-radius: p(10);
                    background:#fff;  
                    }
                }
                div:nth-child(1){
                    
                }
                div:nth-child(2){
                    display:flex;
                    justify-content: flex-end;
                }
            }
        }
    }
}
